import * as THREE from 'three';
const imgSrc1 = require('/static/101112.jpeg');
const imgSrc2 = require('/static/131415.png');



import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
//引入fbx加载器
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
import Stats from 'three/examples/jsm/libs/stats.module';
//import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
//var Loader = new STLLoader();

var scene, camera, renderer, controls, mesh, stats, group;
var textureLoader = new THREE.TextureLoader();
var Loader = new FBXLoader();



export function init() {
    var box = document.getElementById('box')
    // stats
    stats = new Stats();
    box.appendChild(stats.dom);
    console.log(box)
    scene = new THREE.Scene();
    var width = window.innerWidth; //窗口宽度
    var height = window.innerHeight; //窗口高度
    /**透视投影相机对象*/
    camera = new THREE.PerspectiveCamera(60, width / height, 1, 4000);
    camera.position.set(500, 200, 500); //设置相机位置
    camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
    // 辅助坐标系  参数250表示坐标系大小，可以根据场景大小去设置
    var axisHelper = new THREE.AxisHelper(2500);
    scene.add(axisHelper);

    //点光源
    var point = new THREE.PointLight(0xffffff);
    point.position.set(100, 200, 500); //点光源位置
    scene.add(point); //点光源添加到场景中
    //环境光
    var ambient = new THREE.AmbientLight(0x11111);
    scene.add(ambient);

    //雾
    //scene.fog = new THREE.FogExp2(0xffff00, 0.000025)

    addModel();
    addMesh();
    addMeshFloor();
    //addFloor();
    addRain()


    renderer = new THREE.WebGLRenderer();
    controls = new OrbitControls(camera, renderer.domElement);
    renderer.setSize(width, height);//设置渲染区域尺寸
    //renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
    box.appendChild(renderer.domElement); //body元素中插入canvas对象
    ToRender();
    window.addEventListener('resize', function () {
        // camera.aspect = box.innerWidth / box.innerHeight;
        // camera.updateProjectionMatrix();
        renderer.setSize(box.offsetWidth, box.offsetHeight);
    })



}

function ToRender() {

    mesh && mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
    if (group) {
        group.children.forEach(sprite => {
            if (sprite.position.y > 0) {
                sprite.position.y -= 1.5;
            } else {
                sprite.position.y = 500
            }
        })
    }
    renderer.render(scene, camera); //执行渲染操作
    requestAnimationFrame(ToRender); //请求再次执行渲染函数render
    stats.update();


}




//加载模型
function addModel() {
    console.log('Loader', Loader)
    Loader.load('/static/threefiles/light.FBX', function (geometry) {
        var material = new THREE.MeshLambertMaterial({
            color: 0x0000ff,
        }); //材质对象Material
        var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
        scene.add(mesh); //网格模型添加到场景中
    })
}

//生成几何体
function addMesh() {
    var geometry = new THREE.BoxGeometry(100, 100, 100);
    textureLoader.load(imgSrc1, function (img) {
        var material = new THREE.MeshLambertMaterial({ map: img, opacity: 0.7, transparent: true });
        mesh = new THREE.Mesh(geometry, material)
        mesh.translateY(50)
        mesh.castShadow = true
        scene.add(mesh)
    })
}

//生成网格
function addMeshFloor() {
    var size = 1000;
    var divisions = 50;
    var geometry = new THREE.BufferGeometry()
    var vertices = new Float32Array([
        size / -2, 0, 0, //顶点1坐标
        size / 2, 0, 0 //顶点2坐标
    ]);
    geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3))
    for (let i = 0; i < size / divisions + 1; i++) {
        let lineX = new THREE.Line(geometry, new THREE.LineBasicMaterial({
            color: 0x444444,
        }))
        lineX.rotateY(-Math.PI / 2)
        lineX.position.set(-size / 2 + i * divisions, 0, 0)
        scene.add(lineX)

        let lineZ = new THREE.Line(geometry, new THREE.LineBasicMaterial({
            color: 0x444444,
        }))
        lineZ.position.set(0, 0, -size / 2 + i * divisions)
        scene.add(lineZ)
    }
}

//生成地板
function addFloor() {
    const geometry = new THREE.PlaneGeometry(1000, 1000)
    const material = new THREE.MeshBasicMaterial({
        color: 0xbbbbbb,

    })
    const mesh = new THREE.Mesh(geometry, material)
    mesh.rotateX(-Math.PI / 2)
    scene.add(mesh)
}


//使用精灵模型模拟雨
function addRain() {
    textureLoader.load(imgSrc2, function (img) {
        var arr = [];
        group = new THREE.Group();
        var size = 1000;
        var space = 0.5;
        // 均匀分布
        // for (let i = 0; i < size / space+1; i++) {
        //     for (let j = 0; j < size / space+1; j++) {
        //         for (let t = 0; t < size / space+1; t++) {
        //             arr[i] = new THREE.Sprite(new THREE.SpriteMaterial({
        //                 color: 0xcccccc,
        //                 map: img
        //             }))
        //             arr[i].scale.set(3, 20, 1);
        //             arr[i].position.set(size / -2 + i * space, size / -2 + j * space, size / -2 + t * space);
        //             group.add(arr[i]);
        //         }
        //     }

        // }

        // 随机分布
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min)
        }
        for (let i = 0; i < size / space; i++) {
            arr[i] = new THREE.Sprite(new THREE.SpriteMaterial({
                color: 0x999999,
                map: img,
                opacity: 0.8,
                transparent: true
            }))
            arr[i].scale.set(10, 10, 1);
            arr[i].position.set(getRandom(-size / 2, size / 2), getRandom(0, size), getRandom(-size / 2, size / 2));
            group.add(arr[i]);

        }
        scene.add(group);
    })
}



















